<script setup>
import {ref,onMounted,defineProps} from "vue"
import {router} from "../router"

import play_white from "../../public/icons/anime/play_white.svg"

const props = defineProps({
    imageUrl:{type:String},
    videoUrl:{type:String},
    fanLink:{type:String}
})

const ckRef = ref(null)
const videoRef = ref(null)

const isImageShow = ref("isShow")
const isVideoShow = ref("noShow")
const isMuted = ref(true)

onMounted(()=>{
    
})
const moveIn = () => {
    isImageShow.value = "noShow"
    isVideoShow.value = "isShow"
    ckRef.value.style.width = "500px"
    // console.log(videoRef.value)
    // videoRef.value.play()
}
const moveOut = () => {
    isImageShow.value = "isShow"
    isVideoShow.value = "noShow"
    ckRef.value.style.width = "250px"
    // videoRef.value.pause()
}

const goToFanMessage = () => {
    router.push(`/anime-player/${props.fanLink}`)
}
</script>

<template>
    <div class="allAnimeModel" @mouseenter="moveIn()" @mouseleave="moveOut()" ref="ckRef">
        <!-- <div class="imageBox" :class="isImageShow"> -->
        <div class="imageBox"  v-if="isImageShow=='isShow'">
            <img :src="props.imageUrl" alt=""/>
            
        </div>
        <div class="videoBox" v-else>
            <video :src="props.videoUrl" ref="videoRef" autoplay :muted="isMuted"></video>
            <div class="playerBtn">
                <img :src="play_white" alt="" @click="goToFanMessage()"/>
            </div>
        </div>
        <!-- <div class="videoBox" :class="isVideoShow">
            <video :src="props.videoUrl"></video>
        </div> -->
    </div>
</template>

<style scoped>
.allAnimeModel{
    position: relative;
    left: 0;
    width: 250px;
    height: 300px;
    background-color: skyblue;
    border-radius: 10px;
    transition: all 0.3s;
}

.imageBox{
    width: 100%;
    height: 100%;
    background-color: skyblue;
    border-radius: 10px;
    /* transition: all 0.5s; */
}
.imageBox img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.videoBox{
    width: 500px;
    height: 300px;
    background-color: #000;
    border-radius: 10px;
    /* transition: all 0.5s; */
}
.videoBox video{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.isShow{
    display: block;
}
.noShow{
    display: none;
}
.playerBtn{
    position: absolute;
    right: 15px;
    bottom: 15px;
    width:  60px;
    height: 60px;
    background: rgba(0, 255, 255, 1);
    border-radius: 50%;
    transition: all 0.3s;
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
}
.playerBtn img{
    position: absolute;
    left: 8px;
    top: 6px;
    width: 80%;
    height: 80%;
}
</style>